<!DOCTYPE html>
<html>
<head>
    <title>旅游WIFI</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/weui/dist/style/weui.min.css"/>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <script src="/jquery/dist/jquery.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<body>
<h1><%= title %></h1>
<p class="wifi-tips">流量充值</p>

<div class="weui_cells weui_cells_form">
    <div class="weui_cells weui_cells_radio">
        <label class="weui_cell weui_check_label" for="charge-1G">
            <div class="weui_cell_bd weui_cell_primary">
                <p>1G(20元)</p>
            </div>
            <div class="weui_cell_ft">
                <input type="radio" class="weui_check" name="chargeRadio" id="charge-1G" value="1G">
                <span class="weui_icon_checked"></span>
            </div>
        </label>
        <label class="weui_cell weui_check_label" for="charge-2G">

            <div class="weui_cell_bd weui_cell_primary">
                <p>2G(40元)</p>
            </div>
            <div class="weui_cell_ft">
                <input type="radio" name="chargeRadio" class="weui_check" value="2G" id="charge-2G">
                <span class="weui_icon_checked"></span>
            </div>
        </label>
    </div>
</div>
<div class="weui_btn_area">
    <a class="weui_btn weui_btn_primary" href="javascript:" id="submit_charge">充值</a>
</div>
<div style="visibility: hidden">
    <input id="appId" type="hidden" value="<%=config.appId%>" />
    <input id="timestamp" type="hidden" value="<%=config.timestamp%>" />
    <input id="nonceStr" type="hidden" value="<%=config.noncestr%>" />
    <input id="configSign" type="hidden" value="<%=config.sign%>" />
</div>
<div id="loadingToast" class="weui_loading_toast" style="display:none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <div class="weui_loading">
            <div class="weui_loading_leaf weui_loading_leaf_0"></div>
            <div class="weui_loading_leaf weui_loading_leaf_1"></div>
            <div class="weui_loading_leaf weui_loading_leaf_2"></div>
            <div class="weui_loading_leaf weui_loading_leaf_3"></div>
            <div class="weui_loading_leaf weui_loading_leaf_4"></div>
            <div class="weui_loading_leaf weui_loading_leaf_5"></div>
            <div class="weui_loading_leaf weui_loading_leaf_6"></div>
            <div class="weui_loading_leaf weui_loading_leaf_7"></div>
            <div class="weui_loading_leaf weui_loading_leaf_8"></div>
            <div class="weui_loading_leaf weui_loading_leaf_9"></div>
            <div class="weui_loading_leaf weui_loading_leaf_10"></div>
            <div class="weui_loading_leaf weui_loading_leaf_11"></div>
        </div>
        <p class="weui_toast_content">检查支付环境</p>
    </div>
</div>
</body>
<script>
    $(function () {
        showLoadingMask();
        var appId = $('#appId').val();
        var timestamp = $('#timestamp').val();
        var nonceStr = $('#nonceStr').val();
        var configSign = $('#configSign').val();

        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: appId, // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: nonceStr, // 必填，生成签名的随机串
            signature: configSign,// 必填，签名，见附录1
            jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });

        wx.ready(function(){
            hideLoadingMask();
            var $chargeBtn = $('#submit_charge');

            $chargeBtn.on('click', function () {
                $chargeBtn.prop('disabled', true);
                var
                    chargePackage = $('input[name="chargeRadio"]:checked').val(),
                    postData = {
                        chargePackage: chargePackage
                    };

                $.ajax({
                    url: '/charge',
                    type: 'POST',
                    data: postData,
                    dataType: 'json',
                    success: function (res) {

                        wx.chooseWXPay({
                            timestamp: res.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                            nonceStr: res.nonceStr, // 支付签名随机串，不长于 32 位
                            package: res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                            signType: res.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                            paySign: res.paySign, // 支付签名
                            success: function (res) {
                                // 支付成功后的回调函数
                                window.location.href = '/wechat/charge/success?target=charge';
                            },
                            cancel : function (res){
                                console.log(res);
                            }
                        });
                    },
                    error: function (res) {
                        alert('失败:' + res.responseJSON);
                    }
                });
            });
        });

        wx.error(function(res){
            hideLoadingMask();
            alert('jsapi error: ' + res);
        });

        function showLoadingMask(){
            $('#loadingToast').css({display : 'block'});
        }

        function hideLoadingMask(){
            $('#loadingToast').css({display : 'none'});
        }
    });
</script>
</html>
